<template>
	<view class="app l_pages" :style="skin">
		<!-- <jnavbar :title="'购物车'" :PageId="5"></jnavbar> -->

		<view class="page_container" :style="'height:calc(100vh - ' + GapHeight + 'rpx)'" v-bind:class="hasShow == 'none' ? 'u-flex  u-row-center' : ''">
			<block v-if="hasShow == 'none'"><u-empty text="您的购物车空空如也" mode="car"></u-empty></block>
			<block v-else-if="hasShow == 'list'">
				<scroll-view scroll-y class="cart_list">
					<u-gap height="40" bg-color="#f4f4f4"></u-gap>
					<view class="uni-block-list uni-flex-column">
						<view class="merchantdiv" v-for="(data, a) in merchantstr" :key="a" :id="changecount">
							<view class="uni-flex-row merchantName">
								<u-checkbox @change="checkboxChange" :name="a" v-model="data.checked" shape="circle"></u-checkbox>
								<text>{{ data.merchantName }}</text>
							</view>
							<view class="merch_p_list">
								<u-swipe-action
									:show="item.show"
									:index="data.merchantId + '_' + i"
									v-for="(item, i) in merchant[data.merchantId]"
									:key="i"
									@click="click"
									@open="open"
									:options="options"
								>
									<view class="item  uni-flex-row" v-bind:class="merchant[data.merchantId].length - 1 == i ? 'noborder' : ''">
										<u-checkbox
											class="u-checked"
											:disabled="item.disabled"
											@change="checkboxChange"
											:name="a + '_' + i"
											v-model="item.checked"
											shape="circle"
										></u-checkbox>
										<view class="img_box" @click="goItems(item.commodityId)"><easy-loadimage class="img_box" :image-src="item.master"></easy-loadimage></view>
										<view class="detail uni-flex-column">
											<view class="des_info">
												<view class="uni-flex-row uni-flex-title">
													<text class="name u-line-2">{{ item.name }}</text>
												</view>
												<view class="uni-flex-row sku">
													<text class="size sm-font u-line-1" v-if="item.pvs_value">{{ item.pvs_value }}</text>
													<text class="size sm-font" v-else>默认</text>
												</view>

												<!-- <view>{{item.attach}}</view> -->
											</view>

											<view class="uni-flex-row uni-flex-title">
												<text class="price">&yen;&nbsp;{{ item.price }}</text>
												<block v-if="item.status == 0"><text>无效商品,左划删除</text></block>
												<block v-else>
													<u-number-box
														v-if="item.inventory >= item.num"
														:min="1"
														:max="item.is_limitation ? item.limitation : item.inventory"
														:index="i"
														:long-press="false"
														:input-height="40"
														v-model="item.num"
														@change="Editcart(item)"
														:disabled="disabled"
													></u-number-box>
													<text v-else>库存不足</text>
												</block>
											</view>
											<view @click="showattach(item)" class="uni-flex-row sku u-flex " v-if="item.attach && item.attach.length > 0">
												<text class="size sm-font">附加x{{ item.attach.length }},共￥{{ item.attach_pirce }}</text>
												<!-- {{ item.attach | getattchtext }} -->
												<text class="el-sc-xia4"></text>
											</view>
										</view>
									</view>
								</u-swipe-action>
							</view>
						</view>
					</view>
					<u-gap height="40" bg-color="#f4f4f4"></u-gap>
				</scroll-view>
				<view class="uni-block-buy uni-view uni-flex-row">
					<view class="all"><u-checkbox @change="checkboxChange" name="all" v-model="allChecked" shape="circle">全选</u-checkbox></view>
					<view class="sum uni-flex-column" v-if="!isdel">
						<text>合计：{{ onSum }}</text>
					</view>
					<block v-if="onCount > 0">
						<text class="buy del" @click="delItem()">删除</text>
						<text class="buy " @click="bfconfirm">下单</text>
					</block>
					<block v-else>
						<text class="buy del" @click="noselect">删除</text>
						<text class="buy " @click="noselect">下单</text>
					</block>
				</view>
			</block>
		</view>
		<tab-bar ref="tabbar" :PageId="5"></tab-bar>
		<u-popup v-model="show" mode="bottom" :closeable="true">
			<view>
				<view class="pup_title">
					<text>选择结算商品</text>
					<text>提示：选中商品存在不同配送方式,请分开下单</text>
				</view>
				<scroll-view scroll-y class="cart_scroll">
					<view class="cart_pup">
						<text>快递</text>
						<scroll-view scroll-x>
							<view class="u-flex imglist">
								<view class="master" v-for="(item, i) in mlist['send'].list" :key="i"><vimage class="img_box" :src="item.master"></vimage></view>
							</view>
						</scroll-view>

						<view class="u-flex u-row-between">
							<view>
								<text>共{{ mlist['send'].num }}件,合计</text>
								<text>{{ mlist['send'].total }}</text>
								<text>元</text>
							</view>
							<u-button class="btns" type="primary" size="mini" @click="confirm('send')">结算</u-button>
						</view>
					</view>
					<view class="cart_pup">
						<text>自提</text>
						<scroll-view scroll-x>
							<view class="u-flex imglist ">
								<view class="master" v-for="(item, i) in mlist['self'].list" :key="i"><vimage class="img_box" :src="item.master"></vimage></view>
							</view>
						</scroll-view>
						<view class="u-flex u-row-between">
							<view>
								<text>共{{ mlist['self'].num }}件,合计</text>
								<text>{{ mlist['self'].total }}</text>
								<text>元</text>
							</view>
							<u-button class="btns" type="primary" size="mini" @click="confirm('self')">结算</u-button>
						</view>
					</view>
					<view class="cart_pup">
						<text>同城</text>
						<scroll-view scroll-x>
							<view class="u-flex imglist ">
								<view class="master" v-for="(item, i) in mlist['city'].list" :key="i"><vimage class="img_box" :src="item.master"></vimage></view>
							</view>
						</scroll-view>
						<view class="u-flex u-row-between">
							<view>
								<text>共{{ mlist['city'].num }}件,合计</text>
								<text>{{ mlist['city'].total }}</text>
								<text>元</text>
							</view>
							<u-button class="btns" type="primary" size="mini" @click="confirm('city')">结算</u-button>
						</view>
					</view>
				</scroll-view>
				<u-gap height="80" bg-color="#FFF"></u-gap>
			</view>
		</u-popup>
		<u-popup v-model="showat" mode="bottom" :closeable="true" length="50%">
			<view class="attach-pup">
				<view class="attach-content u-flex u-col-bottom u-m-b-30">
					<view class="img_box" @click="goItems(selectItems.commodityId)"><easy-loadimage class="img_box" :image-src="selectItems.master"></easy-loadimage></view>
					<view class="u-flex u-flex-col u-col-top">
						<text class="price">&yen;&nbsp;{{ selectItems.price }}</text>
						<text class="size sm-font" v-if="selectItems.pvs_value">{{ selectItems.pvs_value }}</text>
						<text class="size sm-font" v-else>--</text>
					</view>
				</view>
				<view v-for="(item, i) in selectItems.attach" :key="i" class="u-content-color u-flex u-row-between u-font-sm u-margin-top-20">
					<text>{{ item.act.name }}:{{ item.name }}</text>
					<text>&yen;&nbsp;{{ item.price }}x{{ selectItems.num }}</text>
				</view>
			</view>
		</u-popup>
		<trolley :attach="attach"></trolley>
		<uni-login ref="Login" @callback="logincallback"></uni-login>
		<nloading></nloading>
	</view>
</template>

<script>
import http from '@/common/http.js';
import util from '../../common/util.js';
import store from '@/store';
import {mapState, mapMutations} from 'vuex';

export default {
	onShareAppMessage() {
		return this.wxShare();
	},
	data() {
		return {
			//购物车列表
			list: [],
			//
			selectItems: {},
			//是否显示列表
			hasShow: 'none',
			//判断商品数量变化
			disabled: false,
			user: true,
			merchantstr: [],
			merchant: {'1': []},
			//选中商品列表
			payload: [],
			cart_num: 0,
			changecount: 0,
			// allChecked: true,
			currentPage: 'cart',
			scrollId: 'scroll',
			isdel: false,
			show: false,
			showat: false,
			loading: true,
			attachlist: [],
			attach: [],
			mlist: {
				send: {
					list: [],
					total: 10,
					num: 2
				},
				self: {
					list: [],
					total: 10,
					num: 2
				},
				city: {
					list: [],
					total: 10,
					num: 2
				}
			},
			options: [
				{
					text: '删除',
					style: {
						backgroundColor: 'var(--main-color)'
					}
				}
			]
		};
	},

	computed: {
		//商品总数
		onCount() {
			let count = 0;
			//循环选中商品列表 所有选中商品数量相加
			this.merchantstr.forEach(a => {
				this.merchant[a.merchantId].forEach(c => {
					if (c.checked == true) {
						count += c.num;
					}
				});
			});
			return count;
		},
		allChecked: {
			get() {
				let a = this.merchantstr.filter(_ => {
					return _.checked;
				});
				return a.length == this.merchantstr.length;
			},
			set() {}
		},
		//商品总价
		onSum() {
			let sum = 0;
			this.merchantstr.forEach(a => {
				this.merchant[a.merchantId].forEach(c => {
					if (c.checked == true) {
						sum += c.num * c.price;
						sum += Number(c.attach_pirce);
					}
				});
			});
			return sum.toFixed(2);
		},
		...mapState({
			mallBaseinfo: state => state.mallBaseinfo,
			skin: state => state.skin,
			GapHeight: state => state.GapHeight
		})
	},
	filters: {
		getattchtext(list) {
			// let c=''
			let l = [];
			list.forEach(a => {
				l.push(a.name);
			});
			if (l.length > 0) {
				return ' ' + l.join(',');
			} else {
				return '';
			}
		}
	},
	onPullDownRefresh() {
		this.getCartList();
	},
	async onLoad() {
		await this.$getWx;
		this.changeloading({loading: true});
		// var _this = this;
		// this.judgeLogin(
		// 	() => {
		// 		_this.user = false;
		// 		_this.$store.commit('setlogin', false);
		// 	},
		// 	() => {
		// 		_this.getCartList();
		// 	}
		// );
	},
	onShow() {
		var _this = this;
		this.show=false
		this.judgeLogin(
			() => {
				_this.user = false;
				_this.$store.commit('setlogin', false);
			},
			() => {
				_this.getCartList();
			}
		);
		// #ifdef H5
		this.publicShare();
		// #endif
	},
	methods: {
		showattach(item) {
			this.selectItems = item;
			this.showat = false;
			this.$u.throttle(this.toNext, 1000);
		},
		toNext() {
			this.showat = true;
		},
		showtrolley(item) {
			let ids = item.id.split(',');
			let data = {
				show: true,
				id: ids[0],
				sku: ids[1],
				type: 3, //修改购物车
				attach: item.attachval
			};
			this.$store.commit('settrolley', data);
		},
		noselect() {
			uni.showToast({
				title: '请选择商品！',
				icon: 'none'
			});
		},
		click(index, index1) {
			let i = index.split('_');
			let mid = i[0];
			let cid = i[1];
			let item = this.merchant[mid][cid];

			this.delItem(item);
		},
		// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
		open(index) {
			let i = index.split('_');
			let mid = i[0];
			let cid = i[1];
			let item = (this.merchant[mid][cid].show = true);
		},
		//前往登录
		toLogin() {
			this.$store.commit('setlogin', false);
		},
		logincallback(e) {
			if (e.islogin) {
				this.getCartList();
			}
		},
		//获取购物车列表
		getCartList() {
			// uni.showLoading({
			// 	title: '加载中',
			// 	mask: true
			// });
			const _this = this;

			const param = {
				page: 1
			};

			http('/trolley', param, 'GET').then(
				res => {
					uni.stopPullDownRefresh();
					const json = res.data;

					const list = json.msg;

					//判断购物车内是否有商品 无则显示推荐商品
					if (list.length > 0) {
						_this.hasShow = 'list';
					} else {
						// _this.getrRecommend();
						_this.hasShow = 'none';
					}

					let merchantstr = [];
					let merchant = {};
					this.cart_num = list.length;

					// 遍历购物车列表
					list.forEach(item => {
						item.attach_pirce = 0;
						if (item.attach && item.attach.length > 0) {
							item.attachval = [];
							item.attach.forEach(a => {
								item.attachval.push(a.id);
								item.attach_pirce += Number(a.price) * item.num;
							});
						}
						item.attach_pirce = item.attach_pirce.toFixed(2);
						if (item.is_self == 1) {
							item.merchantName = this.mallBaseinfo.mall_name;
						}
						if (merchant[item.merchantId]) {
							merchant[item.merchantId].push(item);
						} else {
							merchant[item.merchantId] = [];
							merchantstr.push({
								merchantId: item.merchantId,
								merchantName: item.merchantName,
								checked: true
							});
							merchant[item.merchantId].push(item);
						}
						//默认购物车商品列表全部选中

						item.num = Number(item.num);
						item.show = false;
						if (item.inventory - item.num >= 0) {
							item.checked = true;
						} else {
							item.checked = false;
							item.disabled = true;
						}
						item.id = item.commodityId;
						if (item.sku) {
							item.id = item.id + ',' + item.sku;
						} else {
							item.id = item.id + ',' + 0;
						}
					});

					this.merchant = merchant;
					this.merchantstr = merchantstr;
					setTimeout(() => {
						_this.changeloading({loading: false});
					}, 300);
				},
				e => {
					uni.showModal({
						title: '提示',
						content: e,
						showCancel: false
					});
					uni.hideLoading();
				}
			);
		},
		//修改购物车选中商品
		checkboxChange(e) {
			if (e.name != 'all') {
				let a = e.name + '';
				var b = -1; //店铺
				var c = -1; //商品
				if (a.indexOf('_') > -1) {
					//商品
					let d = a.split('_');
					b = d[0];
					c = d[1];
					var merchant = this.merchant;
					if (e.value) {
						let id = this.merchantstr[b].merchantId;
						let l = this.merchant[id].filter(_ => {
							return _.checked;
						});
						if (l.length + 1 == this.merchant[id].length) {
							this.merchantstr[b].checked = true;
						} else {
							this.merchantstr[b].checked = false;
						}
					} else {
						this.merchantstr[b].checked = false;
					}
				} else {
					//商户
					b = a;
					let id = this.merchantstr[b].merchantId;
					this.merchant[id].forEach(_ => {
						if (!_.disabled) _.checked = e.value;
						// _.checked = e.value;
					});
				}
			} else {
				this.merchantstr.forEach(a => {
					a.checked = e.value;
					this.merchant[a.merchantId].forEach(c => {
						if (!c.disabled) c.checked = e.value;
					});
				});
			}
		},
		//删除商品
		delItem(item) {
			const _this = this;
			let list = [];
			if (item) {
				list.push(item);
			} else {
				this.merchantstr.forEach(a => {
					let mylist = this.merchant[a.merchantId].filter(a => {
						return a.checked == true;
					});
					list = list.concat(mylist);
				});
			}

			var data = {};
			list.forEach((a, i) => {
				let b = {
					commodityId: a.commodityId,
					sku: a.sku
				};

				data['data[' + i + '][commodityId]'] = a.commodityId;
				if (a.attachval) {
					data['data[' + i + '][attach]'] = a.attachval;
				}

				if (a.sku) {
					data['data[' + i + '][sku]'] = a.sku;
				}
			});
			//确认框
			uni.showModal({
				title: '提示',
				content: '是否要移除商品？',
				success: function(res) {
					if (res.confirm) {
						http('/trolley/more', data, 'DELETE').then(
							res => {
								if (res.statusCode == 204) {
									_this.getCartList();
								} else {
									uni.showModal({
										title: '提示',
										content: res.data.msg,
										showCancel: false
									});
								}
							},
							e => {
								uni.showModal({
									title: '提示',
									content: e,
									showCancel: false
								});
							}
						);
					}
				}
			});
		},
		//商品分类页
		goCate() {
			uni.switchTab({
				url: '/pages/cate/cate'
			});
		},
		//商品详情页
		goItems(id) {
			this.Jumpurl({
				type: 2,
				id: id
			});
		},
		//获取选中的商品
		async getlist(type, sendtype) {
			let list = [];
			let mlist = [];
			this.merchantstr.forEach(a => {
				let data = {
					merchantName: a.merchantName,
					merchantId: a.merchantId,
					list: [],
					is_store: false,
					name: '选择门店',
					coupon: {},
					sendtype: 1,
					city_price: 0
				};
				data.list = this.merchant[a.merchantId].filter(a => {
					return a.checked == true;
				});
				if (sendtype == 'send') {
					data.sendtype = 1;
					data.list = data.list.filter(a => {
						return a.deliver.indexOf('1') > -1;
					});
				} else if (sendtype == 'self') {
					data.is_store = true;
					data.sendtype = 2;
					data.list = data.list.filter(a => {
						return a.deliver.indexOf('2') > -1;
					});
				} else if (sendtype == 'city') {
					data.is_store = true;
					data.sendtype = 3;
					data.list = data.list.filter(a => {
						return a.deliver.indexOf('3') > -1;
					});
				}
				mlist = mlist.concat(data.list);
				list.push(data);
			});
			if (type == 1) {
				return list;
			} else if (type == 2) {
				return mlist;
			}
		},
		gettotal(list) {
			var total = 0;
			var num = 0;
			list.forEach(a => {
				total = total + Number(a.num) * Number(a.price);
				num = num + Number(a.num);
			});
			return {
				total: total.toFixed(2),
				num: num
			};
		},
		async bfconfirm() {
			let list = await this.getlist(2);

			let sendlist = list.filter(a => {
				return a.deliver.indexOf('1') > -1;
			});
			let selflist = list.filter(a => {
				return a.deliver.indexOf('2') > -1;
			});
			let citylist = list.filter(a => {
				return a.deliver.indexOf('3') > -1;
			});
			let alist = list.filter(a => {
				return a.deliver.indexOf('1') > -1 && a.deliver.indexOf('2') > -1 && a.deliver.indexOf('3') > -1;
			});
			//全部都行
			if (alist.length == list.length) {
				this.confirm('all');
			} else {
				let sendnum = sendlist.length;
				let selfnum = selflist.length;
				let citynum = citylist.length;
				if (sendnum > 0 && selfnum == 0 && citynum == 0) {
					this.confirm('send');
				} else if (sendnum == 0 && selfnum > 0 && citynum == 0) {
					this.confirm('self');
				} else if (sendnum == 0 && selfnum == 0 && citynum > 0) {
					this.confirm('city');
				} else {
					// sendlist = sendlist.concat(alist);
					// selflist = selflist.concat(alist);
					this.mlist = {
						send: {
							list: sendlist,
							total: this.gettotal(sendlist).total,
							num: this.gettotal(sendlist).num
						},
						self: {
							list: selflist,
							total: this.gettotal(selflist).total,
							num: this.gettotal(selflist).num
						},
						city: {
							list: citylist,
							total: this.gettotal(citylist).total,
							num: this.gettotal(citylist).num
						}
					};
					this.show = true;
				}
			}
		},
		//确认购买
		async confirm(sendtype) {
			const _this = this;
			let list = await _this.getlist(1, sendtype);
			var type = 3;
			if (this.allChecked && this.cart_num == list.length) {
				type = 2;
			}
			var mylist = list.filter(b => {
				return b.list.length > 0;
			});
			mylist.forEach(a => {
				a.list.forEach(b => {
					if (b.form_open) {
						let form_list = JSON.parse(b.form_template.config);
						b.form_list = form_list;
						b.template_id = b.form_template.id;
					}
				});
			});
			if (mylist.length > 0) {
				store.commit('setCommoditys', mylist);
				_this.Jumpurl({
					link: '../order/orderdetail?type=' + type + '&sendtype=' + sendtype,
					type: 1,
					login_type: 2
				});
			} else {
				uni.showToast({
					title: '请选择要结算的商品',
					icon: 'none'
				});
			}

			// let commoditys = this.list.filter(a => {
			// 	return a.checked;
			// });
			// this.merchantstr.forEach(a=>{
			// 	this.merchant[a.merchantId].forEach(c => {

			// 	})
			// })
			// this.commoditys = commoditys;
			// let list = [];
			// commoditys.forEach(a => {
			// 	list.push({
			// 		id: a.commodityId,
			// 		sku: a.sku,
			// 		num: a.num,
			// 		merchantId: a.merchant_id,
			// 		master: a.master,
			// 		name: a.name,
			// 		price: a.price,
			// 		pvs_value: a.pvs_value,
			// 		type: a.type
			// 	});
			// });
			// this.commoditys = list;
		},
		// munchange(item){
		// 	item.is_lock=true

		// 	this.Editcart(item)
		// },
		// 修改购物车
		Editcart(data, type) {
			this.changecount++;
			// if(data.disabled){
			// 	return false
			// }
			// this.disabled = true;
			const _this = this;
			let param = {
				commodityId: data.commodityId,
				num: data.num,
				type: data.type
			};
			if (data.attachval) {
				param.attach = data.attachval;
			}
			if (data.sku) {
				param.sku = data.sku;
			}
			if (data.store_id) {
				param.store_id = data.store_id;
			}
			http('/trolley', param, 'PUT')
				.then(async res => {
					data.attach_pirce = 0;
					if (data.attach && data.attach.length > 0) {
						data.attach.forEach(a => {
							data.attach_pirce += Number(a.price) * data.num;
						});
					}
					data.attach_pirce = data.attach_pirce.toFixed(2);
					// this.getCartList()
					if (res.statusCode == 200) {
						return false;
					} else {
						return true;
					}
					// _this.disabled = false;
					// ''data.is_lock=false
				})
				.catch(err => {
					setTimeout(() => {
						this.getCartList();
					}, 300);
					// _this.disabled = false;
				});
		},
		// 修改商品数量
		async countChange(obj) {
			if (this.disabled == false) {
				this.disabled = true;
				const _this = this;
				const data = obj.id;
				let a = await _this.Editcart(data, obj.val);

				if (a) {
					item.num = obj.val;
				}
			}
		}
	}
};
</script>

<style lang="scss">
// page {
// 	padding-bottom: 100rpx;
// }
.page_container {
	height: calc(100vh - 120rpx);
}
.top_div {
	height: 80rpx;
	padding: 0 32rpx;
}
.cart_list {
	height: calc(100% - 76rpx);
}
.uni-block-cart {
	padding: 100rpx 0;
	align-items: center;

	image {
		width: 50%;
		height: 300rpx;
		margin-bottom: 100rpx;
	}

	text {
		color: #696969;
	}
}

.uni-block-list {
	width: 692rpx;
	margin: 0 auto;
	// margin-top: 40rpx;
	// height: 465px;

	.merchantdiv {
		box-shadow: 0px -5rpx 18rpx 0px rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;
		padding: 20rpx 20rpx 0rpx 25rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
		background: #ffffff;
	}
	.merchantName {
		padding-bottom: 20rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #f5f5f5;
		// margin-bottom: 20rpx;
	}
	.merch_p_list {
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.item {
		padding: 20rpx 36rpx 20rpx 0;
		border-bottom: 1rpx solid #ebebeb;
		align-items: flex-start;
		justify-content: space-between;
		.u-checked {
			align-self: center;
		}
		&.noborder {
			border-bottom: none;
		}
		.img_box {
			width: 160rpx;
			height: 160rpx;
			border-radius: 10rpx;
			margin-right: 22rpx;
		}

		.detail {
			// height: 160rpx;
			justify-content: space-between;
			.des_info {
				width: 380rpx;
				box-sizing: border-box;

				// text-overflow: ellipsis;
				// overflow: hidden;
				// display: inline-block;
				// white-space: nowrap;
				.name {
					font-size: 24rpx;
					line-height: 1.4;
				}

				.sku {
					font-size: 20rpx;
					color: #888;
					margin-top: 6rpx;
				}
			}

			.size {
				// width: 200rpx;
				height: 36rpx;
				line-height: 36rpx;
				border-radius: 10rpx;
				// margin-bottom: 20rpx;
				float: right;
			}

			.price {
				font-size: 28rpx;
				font-weight: bold;
				color: #be0000;
				// padding-left: 10rpx;
				line-height: 2;
			}
		}
	}
}

.uni-block-buy {
	padding-left: 20rpx;
	// position: fixed;
	// bottom: 0;
	width: 100%;
	box-sizing: border-box;
	justify-content: space-between;
	align-items: center;
	height: 76rpx;
	box-shadow: 0 -1px 5px 0 rgba(0, 0, 0, 0.06);
	text {
		font-size: 24rpx;
	}

	.all {
		flex: auto;
	}

	.sum {
		width: 160rpx;
		flex: auto;
		font-size: 20rpx;
		font-weight: 500;
		color: #be0000;
	}

	.buy {
		// flex: auto;
		text-align: center;
		// width: 180rpx;
		// height: 70rpx;
		// padding: 50rpx 35rpx;
		font-size: 30rpx;
		color: #f6f6f6;
		line-height: 76rpx;
		// border-radius: 35rpx;
		width: 166rpx;
		height: 76rpx;
		background: var(--main-color);
	}
	.del {
		background: var(--content-color);
		color: var(--main-color);
	}
	// .disabled{
	// 	background: #888888;
	// 	color: #333333;
	// }
}

.uni-block-recommend {
	.body {
		padding: 20rpx 36rpx;
		flex-wrap: wrap;
		justify-content: space-between;

		.uni-flex-item {
			width: 330rpx;

			.bottom {
				padding: 0 8rpx;

				.sold {
					line-height: 1;
					padding: 6rpx 16rpx;
					color: #696969;
					border: 1rpx solid #696969;
				}
			}
		}
	}
}

.uni-block-buy {
	// bottom: 120rpx;
}
.pup_title {
	text {
		display: block;
	}
	text:first-child {
		text-align: center;
		padding: 20rpx 0;
		font-weight: bold;
		font-size: 32rpx;
	}
	text:last-child {
		font-size: 24rpx;
		padding-left: 20rpx;
		margin-bottom: 10rpx;
	}
}
.cart_scroll {
	height: 600rpx;
}
.cart_pup {
	padding: 0 20rpx;
	> text {
		font-weight: bold;
		padding: 16rpx 0rpx;
		display: block;
	}
	> view {
		background-color: #f5f5f5;
	}
	> view:last-child {
		padding: 10rpx;
	}
	.btns {
		margin: 0;
	}
	.imglist {
		padding: 0rpx;
		background-color: #f5f5f5;
	}
	.master {
		margin: 11rpx;
		.img_box {
			width: 120rpx;
			height: 120rpx;
		}
	}
}
.attach-pup {
	padding: 30rpx;
	.attach-content {
		.img_box {
			width: 160rpx;
			height: 160rpx;
			border-radius: 10rpx;
			margin-right: 22rpx;
		}
		.price {
			font-size: 28rpx;
			font-weight: bold;
			color: #be0000;
			// padding-left: 10rpx;
			line-height: 2;
		}
		.size {
			// width: 200rpx;
			height: 36rpx;
			line-height: 36rpx;
			border-radius: 10rpx;
			// margin-bottom: 20rpx;
			float: right;
		}
	}
}
</style>
